<template>
  <el-container class="goods-view panel-block">
    <el-header class="sa-header">
      <el-card class="sa-m-t-10">
          <div class="tip">
            <div>1.电商任务审核失败会返还任务次数，不给予用户任务奖励。</div>
            <div>2.任务审核失败会发送短信至用户，审核驳回时间段9:00-12:00/12:00-15:00/15:00-18:00/18:00-21:00 系统将自动发送审核失败短信至用户，为防止骚扰到用户，每个时间段内审核只会发送一次短信。 </div>
            <div>3.任务审核失败后，用户可以重新接受任务发布视频，不进入三天禁止接单时间。 </div>
          </div>
          
          
        </el-card>
      <div class="sa-title sa-flex sa-row-between">
        
        <el-tabs class="sa-tabs" v-model="state.tabIndex" @tab-change="getData(1,$event)">
          <el-tab-pane v-for="c in state.configList" :key="c.id" :label="c.name" :name="c.id"></el-tab-pane>
        </el-tabs>
       
      </div>
      <el-form class="sa-m-t-10" :model="params" label-width="60px">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="关键词" prop="status">
              <el-input v-model="params.status" placeholder="请输入账号ID/手机"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="时间范围" prop="status">
              <el-date-picker
                v-model="params.value1"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
          <template v-if="state.tabIndex==1">
            <el-col :span="6">
              <el-form-item label="审核状态" prop="status">
                <el-select
                    v-model="params.status"
                    placeholder="请选择"
                >
                  <el-option label="全部" value="-1" />
                  <el-option label="待审核" value="0" />
                  <el-option label="审核成功" value="1" />
                  <el-option label="审核失败" value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="探店分类" prop="status">
                <el-select
                    v-model="params.status"
                    placeholder="请选择"
                >
                  <el-option label="全部" value="-1" />
                  <el-option label="团购" value="0" />
                  <el-option label="供应链" value="1" />

                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="平台" prop="status">
                <el-select
                    v-model="params.status"
                    placeholder="请选择"
                >
                  <el-option label="全部" value="-1" />
                  <el-option label="抖音" value="0" />
                  <el-option label="快手" value="1" />

                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="任务类型" prop="status">
                <el-select
                    v-model="params.status"
                    placeholder="请选择"
                >
                  <el-option label="全部" value="-1" />
                  <el-option label="云剪任务" value="0" />
                  <el-option label="自剪任务" value="1" />

                </el-select>
              </el-form-item>
            </el-col>
          </template>
          
          <el-col :span="4">
            <el-button
                    type="primary"
                    @click="getData()"
                >查询
            </el-button>
            <el-button
                @click="reset()"
                >重置
            </el-button>
          </el-col>
         
        </el-row>
        
        
        
        
        
      </el-form>
    </el-header>
    <el-main class="sa-p-0">
      <div class="sa-table-wrap" v-loading="loading">
        <el-table
            height="600px"
            class="sa-table"
            :data="table.data"
            @selection-change="changeSelection"
            @sort-change="fieldFilter"
            :expand-row-keys="expandRowKeys"
            row-key="id"
            stripe
        >
          <template #empty>
            <sa-empty></sa-empty>
          </template>
          
          <el-table-column  prop="id" label="申请编号 " min-width="100"></el-table-column>
          
          <el-table-column prop="type_txt" label="用户头像" min-width="120">
            <template #default="scope">
              <sa-image :url="scope.row.user?.avatar" size="24"></sa-image>
            </template>
          </el-table-column>
          <el-table-column prop="machine_goods_code" label="用户昵称" min-width="120" />
           
          <template v-if="state.tabIndex==0">
            <el-table-column prop="name" label="手机号" min-width="170"></el-table-column>
            <el-table-column prop="price" label="探店分类" min-width="120"></el-table-column>
            <el-table-column prop="paid_price" label="任务类型 " min-width="120"></el-table-column>
            <el-table-column prop="admin_name" label="是否已结算" min-width="120"></el-table-column>
            <el-table-column prop="status_txt" label="发布时间" min-width="120"></el-table-column>
            <el-table-column prop="crowd_status_txt" label="平台 " min-width="120"></el-table-column>
            <el-table-column prop="status_txt" label="任务名称" min-width="120"></el-table-column>
            <el-table-column prop="status_txt" label="预计收入" min-width="120"></el-table-column>
            <el-table-column prop="statu _txt" label="视频地址 " min-width="120">
              <template #default="scope">
                <el-button
                      class="is-link sa-m-l-12"
                      type="primary"
                      @click="generate(scope.row)"
                  >链接
                  </el-button>
              </template>
            </el-table-column>
            <el-table-column prop="status_txt" label="播放数(24012)" min-width="120"></el-table-column>
            <el-table-column prop="status_txt" label="分享数(24012)" min-width="120"></el-table-column>
            <el-table-column prop="status_txt" label="评论数(24012)" min-width="120"></el-table-column>
            <el-table-column prop="status_txt" label="拒绝原因" min-width="120"></el-table-column>
            <el-table-column fixed="right" prop="status_txt" label="审核状态" min-width="120">
              <template #default="scope">
                <el-button
                      class="is-link sa-m-l-12"
                      type="primary"
                      @click="handle(scope.row)"

                  >审核
                  </el-button>
                  <text style="color:#32cb4f">审核通过</text>


              </template>
            </el-table-column>
          </template>
          <template v-if="state.tabIndex==1">
            <el-table-column prop="name" label="单量"></el-table-column>

            <el-table-column label="操作"  fixed="right">
              <template #default="scope">
                <div class="sa-flex" style="flex-wrap: wrap;">
                  <el-button
                      class="is-link sa-m-l-12"
                      type="primary"
                      @click="seeRow(scope.row)"

                  >查看详情
                  </el-button>
                 
                </div>
              </template>
            </el-table-column>
          </template>
          
        
          
          
        </el-table>
      </div>
    </el-main>
    <sa-view-bar>
      
      <template #right>
        <sa-pagination :pageData="pageData" @updateFn="getData"/>
      </template>
    </sa-view-bar>
  </el-container>
</template>
<script>
export default {
  name: 'shop.admin.goods.goods',
};
</script>
<script setup>
import {onMounted, reactive, ref} from 'vue';
import {api} from '../exmaine.service';
import {ElMessageBox} from 'element-plus';
import {useModal, usePagination} from '@/sheep/hooks';
import {useSearch} from '@/sheep/components/sa-table/sa-search/useSearch';
import {composeFilter} from '@/sheep/utils';
import {useRouter} from 'vue-router';
import Edit from './edit.vue';
import HandleExamine from '../comment/handleExamine.vue';


import {useRoute} from 'vue-router';


import {cloneDeep} from 'lodash';
const colorList=['#8069f6','#32cb4f']
const route = useRoute();

const router = useRouter();

const params = reactive({
    
});
const state = reactive({
  raiseTypeList:{},
  configList:[
    {id:0,name:'审核'},
    {id:1,name:'数据分析'},
  ],
  tabIndex:0
});

// 重置
function reset(){
  for(let key in params){
    params[key]=null
  }
}
// 二维码
const generate = async (row) => {
    const {error,data} = await api.qrcode(row.id)
    if (error === 0) {
      window.open(data.qrcode);
    }
  }



const loading = ref(true);

// 表格
const table = reactive({
  data: [],
  order: null,
  sort: 'sort',
  selected: [],
});

const {pageData} = usePagination();

// 获取数据
async function getData(page,e) {
  loading.value = true;
  if (page) pageData.page = page;
  
 
  // const {error, data} = await api.raise.list({
  //   page: pageData.page,
  //   list_rows: pageData.list_rows,
  // });
  // if (error === 0) {
  //   table.data = data.data;
  //   pageData.page = data.current_page;
  //   pageData.list_rows = data.per_page;
  //   pageData.total = data.total;
  //   if (expandRowKeys.length > 0) {
  //     getSkuPrice(expandRowKeys[0]);
  //   }
  // }
  loading.value = false;
}

// table 字段排序
function fieldFilter({prop, order}) {
  table.order = order == 'ascending' ? 'asc' :( order == 'descending' ?'desc':null);
  table.sort = prop;
  getData();
}

// table 批量选择
function changeSelection(row) {
  table.selected = row;
}











// 查看
function seeRow(row){
  useModal(
      Edit,
      {
        title: '数据分析',
        type: 'see',
        id: row.id,
        type_id:row.type_id,
        class:'sa-width-1000',
      },
      {
        confirm: () => {
        },
      },
  );
}


// 审核
function handle(row){
  useModal(
    HandleExamine,
    {
      title: '修改审核状态',
      class:'sa-width-600'
    },
    {
      confirm: () => {
      },
    },
  );
}



let expandRowKeys = reactive([]);



const skuPrice = reactive({
  data: [],
});

async function getSkuPrice(id) {
  const {data} = await api.goods.getSkuPrice(id);
  skuPrice.data = data;
}



onMounted(() => {
  getData();
});
</script>
<style lang="scss">
.el-tabs.sa-tabs::after{
  display: none;
}
.goods-dropdown {
  .status-up {
    color: var(--el-color-success);
  }

  .status-down {
    color: var(--el-color-danger);
  }

  .status-hidden {
    color: var(--el-color-info);
  }
}
</style>
<style lang="scss" scoped>
.tip{
  color: #777777;
  font-size:14px;
  line-height: 1.5em;
}
</style>
